<template>
  <view class="container">
    <scroll-view class="section" scroll-y="true" :style="{height: wh+'px'}">
      <view class="section-item pd100">
        <view class="item flex flex-colum flex-start">
          <view class="key">投诉说明</view>
          <textarea name="" id="" :disable-default-padding="true" maxlength="40" :auto-height="true" class="value"
                    v-model="complaindetail"  @input="descInput($event)"
                    @blur="complaindetail=complaindetail.replace(/[^\u4E00-\u9FA5|\d|\a-zA-Z|\r\n\s,.?!，。？！…—&$=()-+/*{}[\]]/g, '')"
                    placeholder-class="placeholder"
                    placeholder="请填写投诉或建议" placeholder-style="text-align:left"></textarea>
          <view class="show_number">
            {{remnant}}/40
          </view>
        </view>
        <view class="item flex flex-colum flex-start">
          <view class="key">添加图片</view>
          <view class="flex flex-justify-start image-box">
            <upload ref="upload" :uploadParams="{imagevalue}"></upload>
          </view>
        </view>
      </view>
    </scroll-view>

    <!-- 底部按钮 start -->
    <view class="btn-box w100 fixed">
      <button class="btn btn-save" :disabled="!isclick" type="primary" @click="btnOkClick">提&nbsp;交</button>
    </view>
    <!-- 底部按钮 end -->

  </view>
</template>

<script>
var self
import QQMapWX from '../../utils/qqmap-wx-jssdk'
// import mpImageCompress from 'mp-image-compress'
import upload from '@/components/upload.vue'


var qqmapsdk;
export default {
  components: {
    upload
  },
  data() {
    return {
      mediaUrl: uni.$http.mediaUrl,
      wh: 0,
      remnant: "0",
      complaindetail: '',
      fileList: [],
      imagevalue: '',
      userInfo: uni.getStorageSync('userInfo') || null,
      login_code: '',
      openid: '',
      access_token: '',
      isclick: true,
    };
  },
  onLoad(e) {
    const sysInfo = uni.getSystemInfoSync()
    this.wh = sysInfo.windowHeight - 60
  },
  onShow() {
    self = this
    uni.login({
      provider: 'weixin',
      async success(res) {
        self.login_code = res.code;
        const postmsg = {
          login_code: self.login_code
        }
        const {
          data: ress
        } = await uni.$http.post('wxGetOpenId/', postmsg)
        if (ress.code == 200) {
          self.openid = ress.data.openid
          self.access_token = ress.data.access_token
        } else {
          console.log(ress.msg)
        }
      }
    })

    this.isclick = true
  },
  methods: {
	  descInput(e) {
	  	var lao = e.detail.value
	  	// console.log(lao)
	  
	  	var xin = e.detail.value.replace(/[^\u4E00-\u9FA5|\d|\a-zA-Z|\r\n\s,.?!，。？！…—&$=()-+/*{}[\]]/g, '')
	  	// console.log(xin)
	  
	  	if (lao != xin) {
	  		uni.showToast({
	  			title: '抱歉不可添加特殊符号',
	  			icon: 'none',
	  			duration: 2000
	  		})
	  		this.complaindetail = xin
	  
	  	}
	  
	  	this.remnant = xin.length
	  
	  	if (this.remnant > 49) {
	  		uni.showToast({
	  			title: '超出了字数限制',
	  			icon: 'error',
	  			duration: 1000
	  		})
	  
	  	} 
		// else {
	  // 		if (this.remnant > 0) {
	  // 			this.txtyanzheng("neirong", this.goodsdetail)
	  
	  // 		}
	  
	  
	  	// }
	  },
   async btnOkClick() {
      if (self.isclick) {
        let fileList = this.$refs?.upload.fileList

        if (this.complaindetail == '' || fileList.length == 0) {
          self.isclick = true
          uni.showToast({
            icon: 'none',
            title: '投诉说明以及图片不能为空'
          })
          return null;
        } else if (this.complaindetail.length > 40) {
          self.isclick = true
          uni.showToast({
            icon: 'none',
            title: '投诉说明请控制在40字以内'
          })
          return null;
        }else{
          //todo 投诉建议接口
		  const dataPost = {
		  	tou_user: this.userInfo.username,
		  	bei_user: 0,
		  	reson: this.complaindetail,
		  	imagelist: fileList
		  }
		  const {
		  	data: res
		  } = await uni.$http.post('tousu/', dataPost)
		  if (res.code == 200) {
		  	uni.showToast({
		  		icon: 'success',
		  		title: '投诉成功！',
		  		duration: 2000
		  	})
		  	setTimeout(function() {
		  		uni.reLaunch({
		  			url: '/pages/home/home'
		  		})
		  	}, 2000);
		  	
		  } else {
		  	uni.showToast({
		  		icon: 'error',
		  		title: '请求失败！请联系管理员' + res.msg
		  	})
		  }
        }
        self.isclick = false;

      }
    },
	async goodsPublish() {
	
	
			var imagelists = []
			for (let i = 0; i < this.fileList1.length; i++) {
				imagelists.push(this.fileList1[i].url)
			}
			if (imagelists.length == 0) {
				uni.showToast({
					icon: 'error',
					title: '请务必上传图片',
					duration: 1000
				});
				self.isclick = true;
			} else {
				
			}
	
		}
	
	
	
	},
	
}
</script>

<style lang="scss">
page {
  background-color: #ffffff;
}

.pd100{
  padding-bottom: 100rpx !important;
}
textarea {
  min-height: 200rpx;
  text-align: left !important;
  padding: 20rpx;
  background-color: #F8F8FF;
  border-radius: 12rpx;
  box-sizing: border-box;
  color: #AEAEAE;
  font-size: 28rpx;
  width: 90vw;

}

.show_number {
  position: absolute;
  bottom: 30rpx;
  right: 10rpx;
  color: #AEAEAE;
  font-size: 10px;
}

.item {
  position: relative;
  padding: 10rpx 0 !important;
  margin-bottom: 20rpx;
  .key{
    color: #313131;
    font-size: 28rpx;
  }
  .ml30{
    margin-left: 30rpx;
  }
  .value{
    text-align: left !important;
    font-size: 28rpx !important;
    padding-left: 20rpx;
    color: #AEAEAE !important;
  }
  .value-box{
    width: 200rpx;
    input{
      background-color: #F1F1F1;
      text-align: center !important;
      margin-right: 10rpx;
    }

  }
  .placeholder{
    color: #AEAEAE;
    font-size: 28rpx;
  }
  input{
    border-radius: 34rpx;
    background: rgb(248, 248, 255);
    padding: 5rpx 20rpx;
    font-size: 28rpx;
  }
  &.flex-colum {
    .key {
      padding-bottom: 20rpx;
    }

    .image-box {
      padding-left: 0;
    }
  }

}

.btn-box {
  padding: 20rpx 0rpx 40rpx 0rpx;
  .btn {
    border-radius: 0;
  }
}
.line {
  height: 1rpx;
  background: rgb(233, 235, 254);
  margin-bottom: 18rpx;
  width: 520rpx;
  margin-left: calc(100% - 520rpx);
}
</style>
